<template>
  <div class="p-0-16">
    <div class="header-title mb-12">
      <div class="point mr-8"></div>
      <p class="title">{{ $t('top_news') }}</p>
    </div>
    <div class="marquee-wrap">
      <div
        ref="marquee"
        class="marquee"
        :style="{ animationDuration: duration }"
      >
        <div
          v-for="(item, index) in list"
          :key="index"
          class="item cursor-pointer"
          @click="jumpPage(item)"
        >
          <icon size="20px" name="ic_top_red" />
          <p class="title">{{ item.title }}</p>
          <icon size="16px" name="ic_arrow_right_red" class="mr-36" />
        </div>
        <div
          v-for="(item, index) in list"
          :key="`copy-${index}`"
          class="item cursor-pointer"
          @click="jumpPage(item)"
        >
          <icon size="20px" name="ic_top_red" />
          <p class="title">{{ item.title }}</p>
          <icon size="16px" name="ic_arrow_right_red" class="mr-36" />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { NEWS_PAGE_PATH_MAP } from '@/constants/index.js';

export default {
  props: {
    list: {
      type: Array,
      default: () => []
    }
  },

  data() {
    return {
      speed: 50,
      duration: 0
    };
  },

  mounted() {
    this.duration =
      this.$refs.marquee.getBoundingClientRect().width / this.speed + 's';
  },

  methods: {
    jumpPage({ newsType, newsId }) {
      this.$router.push({
        path: this.localePath(
          `${NEWS_PAGE_PATH_MAP[newsType]}/${newsId}`,
          this.$i18n.locale
        )
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.header-title {
  height: 32px;
  display: flex;
  align-items: center;
  .point {
    width: 4px;
    height: 16px;
    background: #fa4646;
    border-radius: 2px;
  }

  .title {
    font-size: 20px;
    color: #0c0c1c;
    letter-spacing: 0;
    line-height: 32px;
    font-weight: 500;
  }
}

.marquee-wrap {
  background: rgba(12, 12, 28, 1);
  border-radius: 8px;
  height: 52px;
  padding: 16px 0;
  position: relative;
  overflow: hidden;
  &:after {
    content: '0';
    opacity: 0;
  }
}

.marquee {
  position: absolute;
  font-size: 0;
  white-space: nowrap;
  display: flex;
  animation-name: marquee;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

@keyframes marquee {
  to {
    transform: translateX(-50%);
  }
}

.item {
  display: flex;
  align-items: center;
  height: 20px;

  .title {
    font-size: 14px;
    color: #ffffff;
    letter-spacing: 0;
    line-height: 20px;
    margin: 0 4px;
    -webkit-text-size-adjust: none;
  }
}
</style>
